<template>
    <div class="text-wave">
        <span
            v-for="(item, index) in list"
            :key="index"
            :style="`animation-delay: ${(index + 1) * 0.05 + 1}s;`"
        >
            {{ item }}
        </span>
    </div>
</template>

<script>
export default {
    name:'text-wave',
    props: {
        list: {
            type: Array,
        },
    },
};
</script>

<style lang="less" scoped>
.text-wave {
    span {
        display: inline-block;
        will-change: transform;
        animation: animationBlog 4s linear infinite alternate;
    }
}

@keyframes animationBlog {
    0% {
        transform: matrix(0, 0, 0, 0, 0, 0);
    }

    1.666667% {
        transform: matrix(0.19514, 0, 0, 0.19514, 0, -3.8179);
    }

    3.333333% {
        transform: matrix(0.48061, 0, 0, 0.48061, 0, -16.89184);
    }

    5% {
        transform: matrix(0.78868, 0, 0, 0.78868, 0, -35.82897);
    }

    6.666667% {
        transform: matrix(1.06298, 0, 0, 1.06298, 0, -54.24398);
    }

    8.333333% {
        transform: matrix(1.26541, 0, 0, 1.26541, 0, -67.42532);
    }

    10% {
        transform: matrix(1.37835, 0, 0, 1.37835, 0, -73.79667);
    }

    11.666667% {
        transform: matrix(1.40302, 0, 0, 1.40302, 0, -74.15221);
    }

    13.333333% {
        opacity: 1;
        transform: matrix(1.35507, 0, 0, 1.35507, 0, -70.32855);
    }

    15% {
        transform: matrix(1.25874, 0, 0, 1.25874, 0, -64.25506);
    }

    16.666667% {
        transform: matrix(1.14088, 0, 0, 1.14088, 0, -57.53621);
    }

    18.333333% {
        transform: matrix(1.02595, 0, 0, 1.02595, 0, -51.35907);
    }

    20% {
        transform: matrix(0.93241, 0, 0, 0.93241, 0, -46.51039);
    }

    21.666667% {
        transform: matrix(0.87106, 0, 0, 0.87106, 0, -43.40452);
    }

    23.333333% {
        transform: matrix(0.84491, 0, 0, 0.84491, 0, -42.11433);
    }

    25% {
        transform: matrix(0.85043, 0, 0, 0.85043, 0, -42.42524);
    }

    26.666667% {
        transform: matrix(0.87962, 0, 0, 0.87962, 0, -43.92027);
    }

    28.333333% {
        transform: matrix(0.92232, 0, 0, 0.92232, 0, -46.08478);
    }

    30% {
        transform: matrix(0.96839, 0, 0, 0.96839, 0, -48.40959);
    }

    31.666667% {
        transform: matrix(1.00942, 0, 0, 1.00942, 0, -50.47334);
    }

    33.333333% {
        transform: matrix(1.0397, 0, 0, 1.0397, 0, -51.99258);
    }

    35% {
        transform: matrix(1.05659, 0, 0, 1.05659, 0, -52.83794);
    }

    36.666667% {
        transform: matrix(1.06028, 0, 0, 1.06028, 0, -53.02083);
    }

    38.333333% {
        transform: matrix(1.05311, 0, 0, 1.05311, 0, -52.65993);
    }

    40% {
        transform: matrix(1.0387, 0, 0, 1.0387, 0, -51.93743);
    }

    41.666667% {
        transform: matrix(1.02107, 0, 0, 1.02107, 0, -51.05459);
    }

    43.333333% {
        transform: matrix(1.00388, 0, 0, 1.00388, 0, -50.19419);
    }

    45% {
        transform: matrix(0.98989, 0, 0, 0.98989, 0, -49.4943);
    }

    46.666667% {
        transform: matrix(0.98072, 0, 0, 0.98072, 0, -49.03539);
    }

    48.333333% {
        transform: matrix(0.9768, 0, 0, 0.9768, 0, -48.83983);
    }

    50% {
        transform: matrix(0.97763, 0, 0, 0.97763, 0, -48.88146);
    }

    51.666667% {
        transform: matrix(0.98199, 0, 0, 0.98199, 0, -49.09973);
    }

    53.333333% {
        transform: matrix(0.98838, 0, 0, 0.98838, 0, -49.41905);
    }

    55% {
        transform: matrix(0.99527, 0, 0, 0.99527, 0, -49.76363);
    }

    56.666667% {
        transform: matrix(1.00141, 0, 0, 1.00141, 0, -50.07044);
    }

    58.333333% {
        transform: matrix(1.00594, 0, 0, 1.00594, 0, -50.29687);
    }

    60% {
        transform: matrix(1.00846, 0, 0, 1.00846, 0, -50.4232);
    }

    61.666667% {
        transform: matrix(1.00902, 0, 0, 1.00902, 0, -50.4508);
    }

    63.333333% {
        transform: matrix(1.00794, 0, 0, 1.00794, 0, -50.39716);
    }

    65% {
        transform: matrix(1.00579, 0, 0, 1.00579, 0, -50.28941);
    }

    66.666667% {
        transform: matrix(1.00315, 0, 0, 1.00315, 0, -50.15758);
    }

    68.333333% {
        transform: matrix(1.00058, 0, 0, 1.00058, 0, -50.02902);
    }

    70% {
        transform: matrix(0.99849, 0, 0, 0.99849, 0, -49.9244);
    }

    71.666667% {
        transform: matrix(0.99712, 0, 0, 0.99712, 0, -49.85578);
    }

    73.333333% {
        transform: matrix(0.99653, 0, 0, 0.99653, 0, -49.82653);
    }

    75% {
        transform: matrix(0.99665, 0, 0, 0.99665, 0, -49.8327);
    }

    76.666667% {
        transform: matrix(0.99731, 0, 0, 0.99731, 0, -49.86535);
    }

    78.333333% {
        transform: matrix(0.99826, 0, 0, 0.99826, 0, -49.91311);
    }

    80% {
        transform: matrix(0.99929, 0, 0, 0.99929, 0, -49.96465);
    }

    81.666667% {
        transform: matrix(1.00021, 0, 0, 1.00021, 0, -50.01054);
    }

    83.333333% {
        transform: matrix(1.00089, 0, 0, 1.00089, 0, -50.0444);
    }

    85% {
        transform: matrix(1.00127, 0, 0, 1.00127, 0, -50.0633);
    }

    86.666667% {
        transform: matrix(1.00135, 0, 0, 1.00135, 0, -50.06743);
    }

    88.333333% {
        transform: matrix(1.00119, 0, 0, 1.00119, 0, -50.0594);
    }

    90% {
        transform: matrix(1.00087, 0, 0, 1.00087, 0, -50.04329);
    }

    91.666667% {
        transform: matrix(1.00047, 0, 0, 1.00047, 0, -50.02357);
    }

    93.333333% {
        transform: matrix(1.00009, 0, 0, 1.00009, 0, -50.00434);
    }

    95% {
        transform: matrix(0.99977, 0, 0, 0.99977, 0, -49.98869);
    }

    96.666667% {
        transform: matrix(0.99957, 0, 0, 0.99957, 0, -49.97843);
    }

    98.333333% {
        transform: matrix(0.99948, 0, 0, 0.99948, 0, -49.97405);
    }

    to {
        transform: matrix(1, 0, 0, 1, 0, -50);
    }
}
</style>